<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title>计算结果</title>
    <link rel="stylesheet" href="main/css/result.css" />
    <script src="main/js/common.js"></script>
    <script src="main/js/utils.js"></script>
  </head>
  <body>
    <div id="result">
      <header id="result-tab">
        <van-tabs v-model="tabActive" title-active-color="#fff" title-inactive-color="rgba(255,255,255,0.5)" @change="tabChagne">
          <van-tab title="等额本息"></van-tab>
          <van-tab title="等额本金"></van-tab>
        </van-tabs>
      </header>
      <section id="result-content">
        <div class="result-content__limit">
          <div class="__limit-top">
            <p>贷款总额(万元)</p>
            <h1>{{(desc.loanTotalPrice/10000).toFixed(2)}}</h1>
          </div>
          <div class="__limit-bottom">
            <div>
              <span>利息总额（万元）</span>
              <p>{{Math.round(desc.interestTotal/10000 * 100) / 100}}</p>
            </div>

            <div style="background: white; width: 1px; height: 36px"></div>
            <div>
              <span>还款总额（万元）</span>
              <p>{{Math.round(desc.totalPrice/10000 * 100) / 100}}</p>
            </div>
          </div>
        </div>

        <div class="result-content__single">
          <template v-if="isMultiple">
            <h1 class="__single-title">商业贷款</h1>
            <div class="__single-content">
              <div class="__single-content-top">
                <p>每月还款(元)</p>
                <h1>{{Math.round(s.e_money * 100) / 100}}</h1>
              </div>
              <div class="__single-content-middle">
                <div>
                  <span>贷款总额（万元）</span>
                  <p>{{(Math.round(s.loanTotalPrice/10000 * 100) / 100).toFixed(2)}}</p>
                </div>
                <div style="background: rgba(0, 0, 0, 0.5); width: 1px; height: 36px"></div>
                <div>
                  <span>贷款期限（期数）</span>
                  <p>{{s.tl}}期</p>
                </div>
              </div>
              <div class="__single-content-bottom">
                <div>
                  <span>还款总额（万元）</span>
                  <p>{{(Math.round(s.totalPrice/10000 * 100) / 100)}}</p>
                </div>

                <div style="background: rgba(0, 0, 0, 0.5); width: 1px; height: 36px"></div>
                <div>
                  <span>利息总额（万元）</span>
                  <p>{{(Math.round(s.interestTotal/10000 * 100) / 100)}}</p>
                </div>
              </div>
            </div>
            <h1 class="__single-title">公积金贷款</h1>
            <div class="__single-content">
              <div class="__single-content-top">
                <p>每月还款(元)</p>
                <h1>{{Math.round(a.e_money * 100) / 100}}</h1>
              </div>
              <div class="__single-content-middle">
                <div>
                  <span>贷款总额（万元）</span>
                  <p>{{(Math.round(a.loanTotalPrice/10000 * 100) / 100).toFixed(2)}}</p>
                </div>
                <div style="background: rgba(0, 0, 0, 0.5); width: 1px; height: 36px"></div>
                <div>
                  <span>贷款期限（期数）</span>
                  <p>{{a.tl}}期</p>
                </div>
              </div>
              <div class="__single-content-bottom">
                <div>
                  <span>还款总额（万元）</span>
                  <p>{{(Math.round(a.totalPrice/10000 * 100) / 100)}}</p>
                </div>

                <div style="background: rgba(0, 0, 0, 0.5); width: 1px; height: 36px"></div>
                <div>
                  <span>利息总额（万元）</span>
                  <p>{{(Math.round(a.interestTotal/10000 * 100) / 100)}}</p>
                </div>
              </div>
            </div>
          </template>
          <p class="question">以上结果仅供参考，请以当地实际情况为准</p>

          <div class="footer-button">
            <van-button type="info" color="#8d39d5" class="look" @click="viewDetails">查看月供详情</van-button>
          </div>
        </div>
      </section>
    </div>
    <script src="main/js/result.js"></script>
  </body>
</html>
